/*
 * @Descripttion:
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-20 09:45:02
 */
import React, { useState, useEffect } from "react";
import { Tabs } from "antd";
import { ArrowLeftOutlined} from '@ant-design/icons';
import { ProDescriptions } from '@ant-design/pro-components';
import { CmdbContent } from "@/components";
const { TabPane } = Tabs;

const BusinessDetail = ({ history, match, location }) => {
    const state = location.state;
    const path = '/resource/catalog/biz';
    const [info, setInfo] = useState({});
    const [moduleInfo, setModuleInfo] = useState({});
    const [columns, setColumns] = useState([]);

    useEffect(() => {
        if(state) {
            JSON.parse(state.columns).map((item) => {
                item['ellipsis'] = true;   //是否自动缩略
                item['copyable'] = false;  //是否支持复制
            });
            //需要展示出标签
            // const tagRelationsColumns = {
            //     render: (text, record) => {
            //         return '';
            //     }
            // };
            console.log('state',state.data, state.moduleData);
            setInfo(state.data);
            setModuleInfo(state.moduleData);
            setColumns(JSON.parse(state.columns));
        }
    },[state])

    const handleTabOnChange = (tab) => {

    }

    return (
        <CmdbContent>
            <div className="cmdb_host_pane">
                <div className="breadcrumbs-layout">
                    <h3>
                        <ArrowLeftOutlined
                            onClick={() => { history.goBack();}}
                        />
                        {`${moduleInfo.moduleName || '-'}【${info.biz_name || '-'}】`}
                    </h3>
                </div>
                <Tabs defaultActiveKey={"info"} size="large" style={{ padding: '5px 0px', margin: 0}} onChange={handleTabOnChange}>
                    <TabPane tab="属性" key="info">
                        <ProDescriptions
                            title={"基础信息"}
                            dataSource={info}
                            columns={columns}
                            style={{padding: "20px"}}
                        >
                        </ProDescriptions>
                    </TabPane>
                </Tabs>
            </div>
        </CmdbContent>
    )
}

export default BusinessDetail;
